import Vue from "vue";
import Vuex from "vuex";
import recursionRoutes from "@/utils/recursionRoutes"
import { getMenuList } from "@/api"
import allRoutes from "../router/allRoutes";
import dynamicRoutes from "../router/dynamicRoutes"
import router from "@/router"
Vue.use(Vuex);
/* 侧边菜单思路
1、发送请求，获取用户菜单名
2、通过递归函数将计算出当前用户的路由配置
3、将计算好的的路由配置添加到 '/'的 childern中

*/
export default new Vuex.Store({
  // strict: true,//严格模式
  state: {
    /*
      存储状态，那些被其他组件共享的数据都可以称之为state
      vuex中的state和试图是一一对应的
    */
    sideMenu: [], //数组，最终生成的菜单
    breadCrum: [],
  },
  mutations: {
    /*
      更改state的唯一方式？
      一个type对应一个handle
      mutations中的逻辑必须是同步的
    */
    SET_SIDEMENU(state, payload) {
      state.sideMenu = payload;
      // console.log(state.sideMenu);
      /*
      查找到dynamicRoutes中路径为"/",的这个对象，
      在并且添加一个children属性，值就是state.sideMenu
      */
      let target = dynamicRoutes.find(item => {
        return item.path === "/"
      })
      target.children = state.sideMenu

      // 核心方法通过addRoutes将路由动态的添加到项目中去
      router.addRoutes(dynamicRoutes)
    },
    CLEAR_SIDEMENU(state) {
      state.sideMenu = []
    },
    // 更改面包屑
    SET_BREADCRUM(state, payload) {
      state.breadCrum = payload
    },
  },
  actions: {
    /* 
      actions 提交的是mutation 而不是直接变更状态
      actions 可以包含所有的异步操作
      一个类型对应一个函数，接受的参数是context
    */
    async FETCH_MENULIST({ commit }) {
      //  发送请求获取用户菜单名字
      let res = await getMenuList()
      // console.log(res);
      // 调用recursionRoutes 计算出用户的路由配置
      // 在提交给mutations
      if (res.data.state && res.data.menuList.length > 0) {
        let userMenu = recursionRoutes(res.data.menuList, allRoutes)
        commit("SET_SIDEMENU", userMenu)
      } else {
        // 获取路由失败
      }
    }
  },
  modules: {},
  getters: {}
});
